<template>
  <ComWrapper>
    <el-collapse v-model="activeName" accordion >
      <el-collapse-item :title="item.title" :name="index" v-for="(item, index) in collapseList" :key="index">
        <div>{{item.content}}</div>
        <el-button type="primary" icon="el-icon-document-copy" @click="handleCopy(item.content)">
          复制
        </el-button>
      </el-collapse-item>
    </el-collapse>
    <el-input size="large" v-model="clipboard" style="margin-top:60px" placeholder="请输入复制的内容" />
  </ComWrapper>
</template>

<script setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'

const activeName = ref('1')
const clipboard = ref('')
// eslint-disable-next-line no-unused-vars
const collapseList = [
  {title: '一致性', content: '与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；'},
  {title: '反馈', content: '控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；'},
  {title: '效率', content: '清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；'},
  {title: '可控', content: '用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；'}
]

// eslint-disable-next-line no-unused-vars
function handleCopy(text) {
  const input = document.createElement('input')
  document.body.appendChild(input)
  input.setAttribute('value', text)
  input.select()
  clipboard.value = input.value
  document.execCommand('copy') && document.execCommand('copy')
  document.body.removeChild(input)
  ElMessage({
    message: '复制成功',
    type: 'success',
    duration: 1500
  })
}
</script>